<template>
  <div>
   <!--  <head_view title="导购助手"></head_view> -->
     <head_view title="首页"  noticecurrentMark="true"></head_view> 
     <article>
        <div class="h_info">
            <div class="clearfix">
                <div class="fl h_inl clearfix">
                    <div class="fl"><img src="../../../common/images/default_women.png"></div>
                    <div class="fl">
                        <p>小丽</p>
                        <p>工号：<em class="fsz">1235</em></p>
                    </div>
                </div>
                <div class="fr h_inr"><i></i></div>
            </div>
        </div>
        <!--h_info ed-->
        <div class="h_data">
            <div class="clearfix">
                <div class="fl h_target">
                    <h4>我的月度指标</h4>
                    <p><em class="fsz">123</em><span>销售额(元)</span></p>
                    <div>
                        <p>目标: <em><b class="fsz">234</b>元</em></p>
                        <p>达成率: <em class="fsz">24%</em></p>
                    </div>
                </div>
                <!--h_target ed-->
                <div class="fr h_num">
                    <div>
                        <div>
                            <span class="fsz">24</span>
                            <em>加粉数(人)</em>
                            <div class="clearfix">
                                <p class="fl">目标: <em class="fsz"><b>45</b>人</em></p>
                                <p class="fl">达成率: <em class="fsz">67%</em></p>
                            </div>
                        </div>
                        <!--加粉数 ed-->
                        <div>
                            <span class="fsz">100</span>
                            <em>绑约数(人)</em>
                            <div class="clearfix">
                                <p class="fl">目标: <em class="fsz"><b>69</b>人</em></p>
                                <p class="fl">达成率: <em class="fsz">39%</em></p>
                            </div>
                        </div>
                        <!--绑约人 ed-->
                    </div>
                </div>
                <!--h_num ed-->
            </div>
        </div>
        <!--h_data ed-->
        <div class="h_items">
            <ul class="clearfix">
                <li class="fl"><em></em><span>粉丝列表</span></li>
                <li class="fl"><em></em><span>绑约会员</span></li>
                <li class="fl"><em></em><span>解绑会员</span></li>
                <li class="fl"><em></em><span>会员排名</span></li>
                <li class="fl"><em></em><span>会员标签</span></li>
                <li class="fl"><em></em><span>高级筛选</span></li>
                <li class="fl"><em></em><span>邀请入会</span></li>
                <li class="fl"><em></em><span>我的业绩</span></li>
                <li class="fl"><em></em><span>我的收入</span></li>
                <li class="fl"><em></em><span>我的排名</span></li>
                <li class="fl"><em></em><span>我的评价</span></li>
                <li class="fl"><em></em><span>商品浏览</span></li>
                <li class="fl"><em></em><span>寄存业务</span></li>
                <li class="fl"><em></em><span>个人资料</span></li>
                <li class="fl"><em></em><span>签到打卡</span></li>
            </ul>
        </div>
    </article>
  </div>
</template>

<script>
  import Head from '../../public/head.vue'

  export default {
    data() {
      return {}
    },
    components: {
        head_view: Head
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
article{
    width:100%;
    position:absolute;
    top:1rem;
    bottom:0.8rem;
    overflow-x:hidden;
    overflow-y:auto;
    .h_info{
        width:100%;
        height:1.5rem;
        background-color:#fff;
        &>div{
            width:92%;
            margin:0 auto;
            .h_inl{
                width:85%;
            }
            .h_inr{
                width:15%;
            }
        }
    }
}
.h_inl>div:nth-child(1){
    width:1.34rem;
    img{
        width:1rem;
        height:1rem;
        border-radius:50%;
        -webkit-border-radius:50%;
        border:0.05rem solid #e7e7e7;
        margin-top:0.225rem;
    }
}
.h_inl>div:nth-child(2){
    width:68%;
    color:#3e3e3e;
    font-size:0.3rem;
    &>p:nth-child(1){
        margin-top:0.4rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
    }
    &>p:nth-child(2){
        color:#a5a5a5;
        font-size:0.24rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
        margin-top:0.03rem;
    }
}
.h_inr>i{
    display:inline-block;
    width:0.6rem;
    height:0.6rem;
    background:url(../../../common/images/code.png) no-repeat;
    background-size:100% 100%;
    margin-left:0.2rem;
}
.h_data{
    width:100%;
    background-color:#fff;
    margin:0.14rem 0;
    &>div{
        height:3rem;
        &>div:nth-child(1){
            width:40%;
        }
        &>div:nth-child(2){
            width:60%;
        }
    }
}
.h_target>h4{
    color:#9c9c9c;
    font-size:0.24rem;
    margin-top:0.12rem;
    margin-left:6%;
}
.h_target>p{
    text-align:center;
    margin-top:0.54rem;
    margin-bottom:0.28rem;
    &>em{
        display:block;
        color:#e89747;
        font-size:0.46rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
    }
    &>span{
        display:block;
        color:#9c9c9c;
        font-size:0.22rem;
        margin-top:-0.02rem;
    }
}
.h_target>div{
    text-align:center;
    p{
        color:#9c9c9c;
        font-size:0.22rem;
        text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
        em{
             color:#3e3e3e;
        }
     }
}
.h_target>div>p:nth-child(2){
    margin-top:-0.02rem;
}
.h_num>div{
    height:2.56rem;
    margin-top:0.2rem;
    border-left:0.01rem solid #eee;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    &>div{
        width:90%;
        margin:0 auto;
        text-align:center;
        height:1.28rem;
        border-bottom:0.01rem solid #eee;
        &>span{
            display:block;
            color:#e89747;
            font-size:0.46rem;
            text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
        }
        &>em{
            display:block;
            color:#a5a5a5;
            font-size:0.22rem;
            margin-top:-0.08rem
        }
        &>div{
            width:100%;
            margin-top:0.05rem;
            p{
                color:#a5a5a5;
                font-size:0.22rem;
                margin-right:0.08rem;
                margin-left:0.5rem;
                max-width:40%;
                text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
                &>em{
                    color:#3e3e3e;
                }
            }
            p:last-child{
                margin-right:0;
                margin-left:0;
                max-width:50%;
            }
        }
    }
}
.h_num>div>div:last-child{
    border-bottom:0;
    &>span{
        margin-top:0.16rem;
    }
}
.h_items{
    width:100%;
    background-color:#fff;
    ul{
        padding-top:0.28rem;
        padding-bottom:0.14rem;
        li{
            width:25%;
            text-align:center;
            margin-bottom:0.16rem;
            em{
                display:block;
                width:0.96rem;
                height:0.96rem;
                background:url(../../../common/images/home.png) no-repeat;
                background-size:14.4rem  0.96rem;
                margin:0.04rem auto;
        }
        &:nth-child(1) em{
            background-position:-11.52rem 0;
        }
        &:nth-child(2) em{
            background-position:-12.48rem 0;
        }
        &:nth-child(3) em{
            background-position:-13.44rem 0;
        }
        &:nth-child(4) em{
            background-position:-3.84rem 0;
        }
        &:nth-child(5) em{
            background-position:-10.56rem 0;
        }
        &:nth-child(6) em{
            background-position:-7.68rem 0;
        }
        &:nth-child(7) em{
            background-position:-6.72rem 0;
        }
        &:nth-child(8) em{
            background-position:-0.96rem 0;
        }
        &:nth-child(9) em{
            background-position:-2.88rem 0;
        }
        &:nth-child(10) em{
            background-position:-4.8rem 0;
        }
        &:nth-child(11) em{
            background-position:-1.92rem 0;
        }
        &:nth-child(12) em{
            background-position:0 0;
        }
        &:nth-child(13) em{
            background-position:-8.64rem 0;
        }
        &:nth-child(14) em{
            background-position:-5.76rem 0;
        }
        &:nth-child(15) em{
            background-position:-9.6rem;
        }
        span{
            display:block;
            font-size:0.24rem;
            color:#a5a5a5;
        }
    }
    }
}
</style>
